<template>
    <div class="divBox">
      <h1 style="font-size:18px;margin-bottom:15px;">人员情况统计</h1>
      <el-row :gutter="24" class="mb10">
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
<!--                  <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />-->
<!--                  <span class="ivu-pl-8">订单</span>-->
                  <div class="header_title">人员性别</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesPerson.genderList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">人员政治面貌</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesPerson.zzmmList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">人员学历</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesPerson.educationList"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb10">
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">人员类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesPerson.personTypeList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">人员岗位层级</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesPerson.positionLevelList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">人员衔级</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesPerson.rankTitleList"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb20">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">人员年度考评等次情况统计</div>
                </div>
              </div>
            </div>
            <h4></h4>
            <echarts-from ref="visitChart" :yAxisData="yAxisDataPersonCheck" :seriesData="seriesPersonCheck" :xAxis="xAxisPersonCheck" :legendData="legendDataPersonCheck"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb20">
        <el-col :span="8">
          <h1 style="font-size:18px;margin-bottom:15px;">个人电子设备情况统计</h1>
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!--                  <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />-->
                  <!--                  <span class="ivu-pl-8">订单</span>-->
                  <div class="header_title">个人电子设备类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesElc"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <h1 style="font-size:18px;margin-bottom:15px;">型号情况情况统计</h1>
<!--          <el-card :bordered="false" class="dashboard-console-visit">-->
<!--            <div slot="header">-->
<!--              <div class="acea-row row-between-wrapper">-->
<!--                <div class="acea-row row-middle">-->
<!--                  &lt;!&ndash; <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />-->
<!--                  <span class="ivu-pl-8">订单</span> &ndash;&gt;-->
<!--                  <div class="header_title">保护点类型</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesPoint"></echarts-from>-->
<!--          </el-card>-->
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">型号类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesModelType"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="8">
          <h1 style="font-size:18px;margin-bottom:15px;">技术阵地/厂房情况统计</h1>
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">技术阵地/厂房类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesWorkshop"></echarts-from>
          </el-card>
        </el-col>
      </el-row>

      <h1 style="font-size:18px;margin-bottom:15px;">型号情况统计</h1>
      <el-row :gutter="24" class="mb20">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">各型号试验数统计</div>
                </div>
                <div class="checkTime">
                  <label>年度：</label>
                  <el-select v-model="visitDate" placeholder="年度" style="width: 200px;" @change="radioChange">
                    <el-option
                      v-for="(item,index) in yearList"
                      :key="index"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <!--                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">-->
                  <!--                    <el-radio-button label="last30">30天</el-radio-button>-->
                  <!--                    <el-radio-button label="week">周</el-radio-button>-->
                  <!--                    <el-radio-button label="month">月</el-radio-button>-->
                  <!--                    <el-radio-button label="year">年</el-radio-button>-->
                  <!--                  </el-radio-group>-->
                </div>
              </div>
            </div>
            <h4></h4>
            <echarts-from ref="visitChart" :yAxisData="yAxisDataTestsMt" :seriesData="seriesTestsMt" :xAxis="xAxisTestsMt" :legendData="legendDataTestsMt"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <h1 style="font-size:18px;margin-bottom:15px;" hidden>试验情况统计</h1>
      <el-row :gutter="24" class="mb20" hidden>
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">试验类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesTests"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import {
  chartPersonPie,
  chartElcPie,
  chartPointPie,
  chartWorkshopPie,
  chartModelTypePie,
  chartTestsPie,
  chartTestsMtPie,

  chartTestsMtLine,
  chartPersonCheckLine,
  chartOrder30Api,
  chartOrderWeekApi,
  chartOrderMonthApi,
  chartOrderYearApi,
  viewModelApi,
} from '@/api/dashboard';
  import echartsFrom from '@/components/echarts/index';
  import { checkPermi } from "@/utils/permission"; // 权限判断函数

  export default {
    components: {echartsFrom},
    data() {
      return {
        //info: {},
        infoList: null,

        seriesPerson:[],
        seriesElc:[],
        seriesPoint:[],
        seriesWorkshop:[],
        seriesModelType:[],
        seriesTests:[],

        visitDate: null,
        yearList:[],
        //人员考评等次
        seriesPersonCheck: [],
        xAxisPersonCheck: [],
        legendDataPersonCheck: [],
        yAxisDataPersonCheck:[],

        //各型号试验数
        seriesTestsMt: [],
        xAxisTestsMt: [],
        legendDataTestsMt: [],
        yAxisDataTestsMt:[],

        yAxisData: [],
      }
    },
    mounted(){
      this.initYearList()
      this.yAxisDataPersonCheck = [
        {
          type: 'value',
          name: '人员数量',
          minInterval: 1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
      ]
      this.yAxisDataTestsMt = [
        {
          type: 'value',
          name: '试验数量',
          minInterval: 1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
      ]
      this.yAxisData = [
        {
          type: 'value',
          name: '试验数量',
          minInterval: 1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
        {
          type: 'value',
          name: '成功数量',
          minInterval: 1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
          // axisLabel: {
          //     formatter: '{value} °C'
          // }
        }
      ]
    },
    methods: {
      checkPermi,
      initYearList(){
        let date = new Date()
        let year = date.getFullYear()
        for (let i=0;i<10;i++){
          this.yearList.push(year - i)
        }
        this.visitDate = year
      },
      radioChange(val){
        /*switch (val) {
          case 'week':
            this.handleChangeWeek();
            break;
          case 'month':
            this.handleChangeMonth();
            break;
          case 'year':
            this.handleChangeYear();
            break;
          default:
            this.handleChangeVisitType();
            break;
        }*/
        this.chartTestsMt(val)
      },
      // 时间改变
      handleChangeVisitType() {
        this.xAxis = []
        this.legendData = []
        //chartOrder30Api().then(async res => {
        //后期接口调用
        let res = {
          "price":{"09-24":"110","09-25":"294","09-26":"0","09-27":"100","09-28":0,"09-29":"269","09-30":"294","10-01":"0","10-02":0,"10-03":"323","10-04":"614","10-05":"750","10-06":"811","10-07":"100","10-08":"295","10-09":"0","10-10":"218","10-11":"511","10-12":"994","10-13":0,"10-14":"681","10-15":"0","10-16":"100","10-17":"0","10-18":"315","10-19":"0","10-20":"106","10-21":"0","10-22":"946","10-23":"50","10-24":"477"},
          "quality":{"09-24":30,"09-25":20,"09-26":10,"09-27":30,"09-28":0,"09-29":40,"09-30":40,"10-01":10,"10-02":0,"10-03":10,"10-04":50,"10-05":170,"10-06":90,"10-07":30,"10-08":340,"10-09":20,"10-10":100,"10-11":3,"10-12":6,"10-13":0,"10-14":64,"10-15":1,"10-16":2,"10-17":2,"10-18":5,"10-19":4,"10-20":4,"10-21":4,"10-22":13,"10-23":9,"10-24":3}
        };

          //this.info = res
          let pices = []
          let qualitys = []
          for (let key  in res.price) {
            pices.push(Number(res.price[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.legendData = ['试验数','成功数']
          this.series = [{
            name:"试验数",
            type:"bar",
            itemStyle:{
              normal:{
                  color:'#5B8FF9',
              }
            },
            data: pices
          },
            {
              name:"成功数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{
                  color:'#4BCAD5',
              }
              },
              yAxisIndex: 1,
              data: qualitys
            }]
        //})
      },
      handleChangeWeek() {
        this.xAxis = []
        this.legendData = []
        chartOrderWeekApi().then(async res => {
          this.info = res
          this.legendData = ["上周金额", "本周金额", "上周订单数", "本周订单数"]
          let prePrice = []
          let price = []
          let qualitys = []
          let preQuality = []
          for (let key  in res.prePrice) {
            prePrice.push(Number(res.prePrice[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.price) {
            price.push(Number(res.price[key]))
          }
          for (let key  in res.preQuality) {
            preQuality.push(Number(res.preQuality[key]))
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.series = [
            {
              name :"上周金额",
              type:"bar",
              itemStyle:{
                normal:{
                  color:'#5B8FF9',
                }
              },
              data: prePrice
            },
            {
              name:"本周金额",
              type:"bar",
              itemStyle:{
                normal:{color:'#4BCAD5',}
              },
              data: price
            },
            {
              name:"上周订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{color:'#E6A23C',}
              },
              yAxisIndex: 1,
              data: preQuality
            },
            {
              name:"本周订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{color:'#768A9C',}
              },
              yAxisIndex: 1,
              data: qualitys
            }
          ]
        })
      },
      handleChangeMonth() {
        this.xAxis = []
        this.legendData = []
        chartOrderMonthApi().then(async res => {
          this.info = res
          this.legendData = ["上月金额", "本月金额", "上月订单数", "本月订单数"]
          let prePrice = []
          let price = []
          let qualitys = []
          let preQuality = []
          for (let key  in res.prePrice) {
            prePrice.push(Number(res.prePrice[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.price) {
            price.push(Number(res.price[key]))
          }
          for (let key  in res.preQuality) {
            preQuality.push(Number(res.preQuality[key]))
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.series = [
            {
              name:"上月金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#5B8FF9',
                }
              },
              data: prePrice
            },
            {
              name:"本月金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#4BCAD5'
                }
              },
              data: price
            },
            {
              name:"上月订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#E6A23C'
                }
              },
              yAxisIndex: 1,
              data: preQuality
            },
            {
              name:"本月订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#768A9C'
                }
              },
              yAxisIndex: 1,
              data: qualitys
            }
          ]
        })
      },
      handleChangeYear() {
        this.xAxis = []
        this.legendData = []
        chartOrderYearApi().then(async res => {
          this.info = res
          this.legendData =  ["去年金额", "今年金额", "去年订单数", "今年订单数"]
          let prePrice = []
          let price = []
          let qualitys = []
          let preQuality = []
          for (let key  in res.prePrice) {
            prePrice.push(Number(res.prePrice[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.price) {
            price.push(Number(res.price[key]))
          }
          for (let key  in res.preQuality) {
            preQuality.push(Number(res.preQuality[key]))
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.series = [ ////let col = ["#B37FEB", "#FFAB2B", "#1890FF", "#00C050"];
            {
              name:"去年金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#5B8FF9'
                }
              },
              data: prePrice
            },
            {
              name:"今年金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#4BCAD5'
                }
              },
              data: price
            },
            {
              name:"去年订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#E6A23C'
                }
              },
              yAxisIndex: 1,
              data: preQuality
            },
            {
              name:"今年订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#768A9C'
                }
              },
              yAxisIndex: 1,
              data: qualitys
            }
          ]
        })
      },

      //饼图
      statisticsPersonPie(){
        chartPersonPie().then(async res => {
          this.seriesPerson = res;
        })
      },
      statisticsElcPie(){
        chartElcPie().then(async res => {
          this.seriesElc = res;
        })
      },
      statisticsPointPie(){
        chartPointPie().then(async res => {
          this.seriesPoint = res;
        })
      },
      statisticsWorkshopPie(){
        chartWorkshopPie().then(async res => {
          this.seriesWorkshop = res;
        })
      },
      statisticsModelTypePie(){
        chartModelTypePie().then(async res => {
          this.seriesModelType = res;
        })
      },
      statisticsTestsPie(){
        chartTestsPie().then(async res => {
          //暂时隐藏
          //this.seriesTests = res;
        })
      },
      //柱状图
      chartPersonCheck() {
        this.xAxisPersonCheck = []
        this.legendDataPersonCheck = []
        chartPersonCheckLine().then(async res => {
        //后期接口调用
        /*let res = {
          "2019":[10,20,30,40],"2020":[20,10,40,30],"2021":[15,15,20,30],"2022":[30,20,40,25],
        };*/

        //this.info = res
        let nums1 = []
        let nums2 = []
        let nums3 = []
        let nums4 = []
        for (let key  in res) {
          nums1.push(Number(res[key][0]))
          nums2.push(Number(res[key][1]))
          nums3.push(Number(res[key][2]))
          nums4.push(Number(res[key][3]))
          this.xAxisPersonCheck.push(key)
        }
        this.legendDataPersonCheck = ['优秀','及格','基本及格','不及格']
        this.seriesPersonCheck = [{
          name:"优秀",
          type:"bar",
          stack: 'Ad',
          barWidth: '100px',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#73c0de',
            }
          },
          data: nums1
          }, {
            name:"及格",
            type:"bar",
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              normal:{
                color:'#91cc75',
              }
            },
            data: nums2
          }, {
            name:"基本及格",
            type:"bar",
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              normal:{
                color:'#fac858',
              }
            },
            data: nums3
          }, {
            name:"不及格",
            type:"bar",
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              normal:{
                color:'#ee6666',
              }
            },
            data: nums4
        }]
        })
      },
      chartTestsMt(year) {
        this.xAxisTestsMt = []
        this.legendDataTestsMt = []
        chartTestsMtLine({year:year}).then(async res => {
        //this.info = res
        let nums = []
        for (let key  in res) {
          nums.push(Number(res[key]))
          this.xAxisTestsMt.push(key)
        }
        //this.legendDataTestsMt = ['优秀','及格','基本及格','不及格']
        this.seriesTestsMt = [{
          //name:"优秀",
          type:"bar",
          barWidth: '100px',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#73c0de',
            }
          },
          data: nums
        }]
        })
      },

      // 监听页面宽度变化，刷新表格
      handleResize() {
        if (this.infoList) this.$refs.visitChart.handleResize();
      }
    },
    created() {
      this.statisticsPersonPie()
      this.statisticsElcPie()
      this.statisticsPointPie()
      this.statisticsWorkshopPie()
      this.statisticsModelTypePie()
      this.statisticsTestsPie()

      this.chartPersonCheck()

      let date = new Date()
      let year = date.getFullYear()
      this.chartTestsMt(year)

      this.handleChangeVisitType();
    }
  }
</script>
<style lang="scss" scoped>
  .acea-row{
    ::v-deep.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  .header_title{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    padding-left:8px;
    position: relative;
    &::before{
      position: absolute;
      content: '';
      width: 2px;
      height: 18px;
      background: #1890FF;
      top:0;
      left:0;
    }
  }
  .checkTime{
    ::v-deep.el-radio__input{
      display: none;
    }
  }
  .ivu-pl-8{
    margin-left: 8px;
    font-size: 14px;
  }
  .divBox {
    padding: 0 20px !important;
  }
  .dashboard-console-visit {
    ::v-deep.el-card__header{
      padding: 14px 20px !important;
    }
    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }
  .ivu-mb{
    margin-bottom: 10px;
  }
</style>
